<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta content="text/html;charset=UTF-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width,initial-scale=1"></meta>

<link th:href="@{asset/bootstrap-3.3.7-dist/css/bootstrap.css}"
	rel="stylesheet"></link>

<link th:href="@{asset/bootstrap-3.3.7-dist/css/bootstrap-theme.css}"
	rel="stylesheet"></link>
<script type="text/javascript"
	th:src="@{asset/jquery-3.2.1/jquery-3.2.1.js}"></script>
<script type="text/javascript" th:src="@{asset/websocket/sockjs.js}"></script>
<script type="text/javascript" th:src="@{asset/websocket/stomp.js}"></script>
<title >聊天室</title>

</head>
<body>
	<p style="color: red;">聊天室 </p>
	<form id="wiselyForm">
	   <textarea rows="4" cols="60" name="text"></textarea>
	   <input type="submit"/>
	   
	</form>
	
	<div id="output"></div>
</body>

<script th:inline="javascript">
 $("#wiselyForm").submit(function(e){
	 e,preventDefault();
	 var text  = $("#wiselyForm").find('textarea[name="text"]').val();
	 sendspittle(text);
 });
 // 连接endPoint名称为“/endpointChat的endpoint”
var sock = new SockJS("/endpointChat");
var stomp = Stomp.over(sock);
stomp.connect('guest','guest',function(frame){
	// 订阅/user/queue/notifications发送的消息
	stomp.subscribe("/user/queue/notifications",handleNotification);
});


function handleNotification(message){
	$('#output').append("<b>Received:" + message.body + "</b><br/>");
}

function sendSpittle(text){
	stomp.send("/chat",{},text);
}

$('#stop').click(function(){
	sock.close();
});

</script>


</html>